import React, { useEffect, useState } from 'react'
import Taro, { FC, useDidShow } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { AddressObj } from '@/constants/commonType'
import api from '@/services/config/index'
import { editAddress } from '@/actions/common'
import { useDispatch } from 'react-redux'
import { AtIcon } from 'taro-ui'
import './index.scss'

type AddressList = Array<AddressObj>
const Address: FC = () => {
  const dispatch = useDispatch()
  const [addressList, setAddressList] = useState<AddressList>([])
  // 获取地址列表
  function getAddressListNew() {
    api['address/getAddressListNew']().then((res) => {
      const data = res.data
      setAddressList(data)
    })
  }
  useEffect(() => {
    getAddressListNew()
  }, [])
  useDidShow(() => {
    getAddressListNew()
  })
  // 设置和取消默认地址
  function setDefaultAddress(item, type) {
    console.log(type)
    let formValue = {}
    if (type === 'delete') {
      formValue = {
        action: 3,
        addressId: item.addressId
      }
    } else {
      formValue = {
        action: 2,
        addressId: item.addressId,
        streetId: item.street.streetId,
        communityId: item.community.communityId,
        districtId: item.district.districtId,
        areaAddressId: item.areaAddress.areaAddressId,
        address: item.address,
        addressDetail: item.addressDetail,
        addressName: item.addressName,
        addressMobile: item.addressMobile,
        state: item.state === '1' ? 0 : 1
      }
    }

    api['address/addAddress'](formValue).then((_) => {
      Taro.showToast({
        title: '设置成功',
        icon: 'none'
      })
      getAddressListNew()
    })
  }

  return (
    <View className='address grey-bgc'>
      {addressList.length > 0 && (
        <View className='address-list'>
          {addressList.map((item) => {
            return (
              <View
                className='address-list-info'
                key={item.addressId}
                onClick={() => {
                  dispatch(editAddress(item))
                  Taro.navigateBack({ delta: 1 })
                }}
              >
                {/* 私有信息 */}
                <View className='address-list-info__private sb-flex'>
                  <View className='private-name'>
                    <Text>收货人：</Text>
                    <Text>{item.addressName}</Text>
                  </View>
                  <View className='private-phone'>{item.addressMobile}</View>
                </View>
                {/* 详细地址 */}
                <View className='address-list-info__detail grey-color'>
                  <Text className='detail-name'>详细地址：</Text>
                  <Text>{item.addressDetail}</Text>
                </View>
                {/* 关联小区 */}
                <View className='address-list-info__village grey-color'>
                  <Text>关联小区：</Text>
                  <Text>
                    {item.street.streetName +
                      item.community.communityName +
                      item.district.districtName}
                  </Text>
                </View>
                {/* 设置默认地址 */}
                <View className='address-list-info__modify b-top sb-flex'>
                  <View
                    onClick={(e) => {
                      e.stopPropagation()
                      setDefaultAddress(item, 'setup')
                    }}
                  >
                    {item.state === '1' ? (
                      <AtIcon
                        prefixClass='icon'
                        value='checkbox'
                        size='15'
                        color='#c50001'
                        className='modify-defalut'
                      ></AtIcon>
                    ) : (
                      <AtIcon
                        prefixClass='icon'
                        value='checkbox'
                        size='15'
                        color='#999999'
                        className='modify-defalut'
                      ></AtIcon>
                    )}
                    默认地址
                  </View>
                  {/* 编辑删除地址 */}
                  <View className='modify-editAndDelate'>
                    <View
                      className='modify-edit'
                      onClick={(e) => {
                        e.stopPropagation()
                        dispatch(editAddress(item))
                        Taro.navigateTo({ url: '/pages/Address/editAndDelete?type=edit' })
                      }}
                    >
                      <AtIcon
                        prefixClass='icon'
                        value='edit'
                        size='15'
                        color='#999999'
                        className='icon-spacing'
                      ></AtIcon>
                      编辑
                    </View>
                    <View
                      onClick={(e) => {
                        e.stopPropagation()
                        setDefaultAddress(item, 'delete')
                      }}
                    >
                      <AtIcon
                        prefixClass='icon'
                        value='delate'
                        size='15'
                        color='#999999'
                        className='icon-spacing'
                      ></AtIcon>
                      删除
                    </View>
                  </View>
                </View>
              </View>
            )
          })}
        </View>
      )}
      {addressList.length <= 0 && (
        <View className='address-blankPage'>
          <Text className='c-fixed'>您还没有新的地址，快去添加吧~</Text>
        </View>
      )}
      <Button
        className='commmon-btn'
        onClick={() => {
          Taro.navigateTo({ url: '/pages/Address/editAndDelete?type=add' })
        }}
      >
        新增地址
      </Button>
    </View>
  )
}

export default Address
